import React from 'react'
import SearchBar from '../SearchBar/SearchBar'
import { Button, Checkbox, Select } from 'antd'; //引入antd组件
import { useState, useRef } from 'react'; //引入react相关函数
import { BellOutlined, MenuUnfoldOutlined, RightOutlined, CustomerServiceOutlined } from '@ant-design/icons'; //引入antd图标
import img from '../../assets/img/1-03.jpg'
import img1 from '../../assets/img/2-03.jpg'
import img2 from '../../assets/img/2-05.jpg'
function TopCom(
  { onLoginClick,
    userInfo,
    onLogout }: {
      onLoginClick: () => void;
      userInfo: any;
      onLogout?: () => void;
    }
) {
  const [showPopup, setShowPopup] = useState(false); //控制用户信息弹窗显示
  const popupRef = useRef<HTMLDivElement>(null); //创建一个ref来引用用户信息弹窗元素
  const [showVipPopup, setShowVipPopup] = useState(false); //控制会员信息弹窗显示
  const vipPopupRef = useRef<HTMLDivElement>(null); //创建一个ref来引用会员信息弹窗元素
  const [showMessagePopup, setShowMessagePopup] = useState(false); //控制消息弹窗显示
  const messagePopupRef = useRef<HTMLDivElement>(null); //创建一个ref来引用消息弹窗元素
  // 用户信息弹窗内容结构
  const UserPopup = () => (
    <div
      className="user-popup"
      ref={popupRef}
      onMouseLeave={() => setShowPopup(false)}
    >
      <div className="popup-header">
        <div className="user-info">
          <div className="user-left">
            <img src={userInfo?.avator} alt="User Avatar" style={{ width: '50px', height: '50px' }} />
          </div>
          <div className="user-right">
            <div className="name">{userInfo?.nickname} <span className="user-tag">超级管理员</span></div>

            <div className="user-id">用户ID: {userInfo?.id}</div>
          </div>

        </div>

      </div>

      <div className="storage-info">
        <div className="storage-item">
          <div className="value">559.29MB</div>
          <div className="label">剩余存储空间</div>
        </div>
        <div className="storage-item">
          <div className="value">6</div>
          <div className="label">稿豆</div>
        </div>
        <div className="storage-item">
          <div className="value">0</div>
          <div className="label">素材下载次数</div>
        </div>
      </div>



      <div className="vip-section">
        <div className="membership-status">
          <span className="status">免费版</span>

        </div>
        <div className="vip-card">
          <div className="vip-left">
            <h4>购买模板会员</h4>
            <p>海量内容商用授权，高清无水印下载</p>
          </div>

          <p className='price'><h5>低至8元/月</h5></p>
          <Button type="primary" className="upgrade-btn">
            开通会员
          </Button>

        </div>
        <div className="vip-card">
          <div className="vip-left">
            <h4>购买素材下载会员</h4>
            <p>过亿版权素材，下载商用源文件</p>
          </div>


          <Button type="primary" className="upgrade-btn">
            开通会员
          </Button>
        </div>

      </div>

      <div className="settings-section">
        <div className="setting-item">账号设置</div>
        <div className="setting-item">我的优惠券</div>
        <div className="setting-item">管理与设置</div>
        <div className="setting-item">切换团队</div>
        <div className="setting-item "
          onClick={() => {
            setShowPopup(false); // 关闭用户弹窗
            onLogout?.(); // 触发父组件退出回调
          }}
        >退出登录</div>
      </div>
    </div>
  );

  // 会员弹窗组件
  const VipPopup = () => (
    <div
      className="vip-popup"
      ref={vipPopupRef}
      onMouseEnter={() => setShowVipPopup(true)}
      onMouseLeave={() => setTimeout(() => setShowVipPopup(false), 500)}
    >
      <div className="popup-content">
        <div className="vip-tier vip1">
          <h3>模板会员</h3>
          <ul>
            <li>个人/企业商用授权</li>
            <li>海量VIP专享模板</li>
            <li>高清无水印下载</li>
            <li>支持10人以内实时共享协作</li>
          </ul>
          <Button className="price btn1">14.5元/席位/月起</Button>
        </div>

        <div className="vip-tier vip2">
          <h3>素材下载会员</h3>
          <ul>
            <li>个人/企业商用授权</li>
            <li>亿级正版素材内容</li>
            <li>源文件可商用下载</li>
            <li>多人共享源文件下载</li>
          </ul>
          <Button className="price btn2">17.7元/席位/月起</Button>
        </div>

        <div className="vip-tier vip3">
          <h3>大会员</h3>
          <ul>
            <li>个人/企业商用授权</li>
            <li>模板会员全部权益</li>
            <li>素材下载会员全部权益</li>
          </ul>
          <Button className="price btn3">18.7元/席位/月起</Button>
        </div>

        <div className="enterprise-service">
          <div className="service-left">
            <a href="#">企业服务 <RightOutlined /></a>
            <p>中大型集团企业专属，提供跨部门智能协作方案及客户成功服务</p>
          </div>
          <div className="service-right">
            <Button className="consult-btn"><CustomerServiceOutlined />立即咨询</Button>
          </div>
        </div>

        <div className="other-method">
          <div className="other-left">
            <p>不同方案价格对比</p>
          </div>
          <div className="other-right">
            <span><img src={img1} alt="" />开放平台</span>

            <span><img src={img2} alt="" />渠道代理</span>
          </div>
        </div>
      </div>
    </div>
  );

  // 消息弹窗组件
  const MessagePopup = () => (
    <div className="message-popup" ref={messagePopupRef}
      onMouseEnter={() => setShowMessagePopup(true)}
      onMouseLeave={() => setTimeout(() => setShowMessagePopup(false), 1000)}>
      <div className="popup-header">
        <div className='left'>
          <h3>消息中心</h3>
          <Checkbox style={{marginLeft: '15px'}}>仅看待我处理</Checkbox>
        </div>

        <div className="right">
          <Select
            defaultValue="未读"
            style={{ width: 100,height:40 }}
           
            options={[
              { value: '全读', label: '全读' },
              { value: '未读', label: '未读' },
            
            ]}
          />

        </div>
      </div>

      <div className="message-list">

        <div className="empty">
          <img src={img} alt="" />
          <p>暂无消息</p>
        </div>
      </div>

      <div className="popup-footer">
        <Button type="link" block><MenuUnfoldOutlined />全部已读</Button>
      </div>
    </div>
  );

  return (
    <div className='topCom'>
      <div className="nav-container">
          <SearchBar />


       {/* 顶部导航容器 */}
      <div className="top-nav">
       

        <div
          className="vip-btn"
          onMouseEnter={() => setShowVipPopup(true)}
          onMouseLeave={(e) => {
            const relatedTarget = e.relatedTarget as HTMLElement;
            if (!vipPopupRef.current?.contains(relatedTarget)) {
              // 延迟关闭
              setTimeout(() => {
                if (!vipPopupRef.current?.contains(document.activeElement)) {
                  setShowVipPopup(false);
                }
              }, 200);
            }
          }}
        >
          {showVipPopup && <VipPopup />}
        </div>
        {/* 铃铛 */}
        {userInfo && (
          <div
            className="bell-wrapper"
            onMouseEnter={() => setShowMessagePopup(true)}
            onMouseLeave={(e) => {
              const relatedTarget = e.relatedTarget as HTMLElement;
              if (!messagePopupRef.current?.contains(relatedTarget)) {
                setTimeout(() => {
                  if (!messagePopupRef.current?.contains(document.activeElement)) {
                    setShowMessagePopup(false);
                  }
                }, 200);
              }
            }}
          >
            <BellOutlined className="bell-icon" />
            {showMessagePopup && <MessagePopup />}
          </div>
        )}
        {/* 用户头像/登录按钮 */}
        {userInfo ? (
          <div className='avatar-wrapper'
            onMouseEnter={() => setShowPopup(true)}
            onMouseLeave={(e) => {
              if (
                popupRef.current &&
                e.relatedTarget instanceof Node &&
                !popupRef.current.contains(e.relatedTarget)
              ) {
                return;
              }
              setShowPopup(false)
            }}>
            <img
              src={userInfo.avator}
              className="user-avatar"
            />
            {showPopup && <UserPopup />}
          </div>
        ) : (
          <Button
            type="primary"
            className="login-btn"
            onClick={onLoginClick}
          >
            登录/注册
          </Button>
        )}



      </div>
      </div>
     
    </div>
  )
}

export default TopCom
